<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="${ctx}/favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctx}/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="${ctx}/css/animate.min.css" rel="stylesheet">
<link href="${ctx}/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<!-- Data Tables -->
<link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
<!-- 引入文件上传组件 webuploader 的样式 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/plugins/webuploader/webuploader.css">
<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/jquery.form.js"></script>
<script src="${ctx}/js/content.min.js?v=1.0.0"></script>
<script src="${ctx}/js/plugins/iCheck/icheck.min.js"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 引入分页插件  -->
<script src="${ctx}/js/bootstrap-paginator.js"></script>

<script src="${ctx}/js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- 引入layer.js插件 -->
<script src="${ctx}/js/plugins/layer2.4/layer.js"></script>


<!-- 引入 文件上传组件 webuploader 的js -->
<script src="${ctx}/js/plugins/webuploader/webuploader.js"></script>


<!-- Data Tables -->
<script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- 引入日历插件js文件 -->
<script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>


<!-- 引入弹框插件 layer  -->
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>


<!-- 引入 Jquery.validate.js 表单验证框架 -->
<script src="${ctx}/js/jquery.validate.min.js"></script>
<script src="${ctx}/js/messages_zh.min.js"></script>

<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>
</head>

<body class="gray-bg">

	<div class="col-sm-12">

		<div class="ibox float-e-margins"></div>

		<div class="ibox-content">
			<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline" role="grid">
				<div class="row">
					<div class="col-sm-6">
						<div class="dataTables_length" id="DataTables_Table_0_length">
							<label>
								每页
								<select id="pageSize" class="form-control input-sm">
									<option value="10" ${pageResult.pageSize eq 10 ?'selected':''}>10</option>
									<option value="25" ${pageResult.pageSize eq 25 ?'selected':''}>25</option>
									<option value="50" ${pageResult.pageSize eq 50 ?'selected':''}>50</option>
									<option value="100" ${pageResult.pageSize eq 100 ?'selected':''}>100</option>
								</select>
								条记录 &nbsp;
							</label>
							&nbsp;
							<label>
								<button onclick="addtask()" class="btn btn-primary btn-sm">添加任务</button>
							</label>
						</div>
					</div>
					<div class="col-sm-6">
						<div id="DataTables_Table_0_filter" class="dataTables_filter">
							<label>
								查找：
								<input class="form-control input-sm" placeholder="请输入标题" id="search" type="search"
									value="${keyword}">
							</label>
						</div>
					</div>
				</div>
				<table class="table table-striped table-bordered table-hover dataTables-example"
					id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
					<thead>
						<tr role="row">
							<th class="sorting_asc" tabindex="0"><input type="checkbox" id="delallpagetask">
								&nbsp;
								<button onclick="delpagetask()" class="btn btn-primary btn-sm">批量删除</button></th>
							<th class="sorting_asc" tabindex="0">任务编号</th>
							<th class="sorting_asc" tabindex="0">标题</th>
							<th class="sorting_asc" tabindex="0">截止时间</th>
							<th class="sorting_asc" tabindex="0">执行人员</th>
							<th class="sorting_asc" tabindex="0">任务状态</th>
							<th class="sorting_asc" tabindex="0">紧急程度</th>
							<th class="sorting_asc" tabindex="0">操作</th>
						</tr>
					</thead>
					<tbody id="showtask">
						<!-- 使用标签库 c:forEach 循环 集合${pageResult.dataList} -->
						<c:forEach items="${pageResult.dataList}" var="task">
							<tr id="tr_${task.id}" class="gradeA odd">
								<td class=""><input type="checkbox" value="${task.id}"></td>
								<td class="">${task.id}</td>
								<td class="">${task.title}</td>
								<td class="">${task.fintime}</td>
								<td class=""><c:forEach items="${pageResult.uname}" var="map">
										<c:if test="${map.key==task.person}">${map.value}</c:if>
									</c:forEach></td>
								<td class="" style="${task.status eq 1 ?'color:red':'color:green'}">${task.status eq 1 ?'未完成':'完成'}</td>
								<td class=""
									style="${task.urgent eq 1 ?'color:blue':task.urgent eq 2 ? 'color:orange':'color:red'}">${task.urgent eq 1 ?'普通':task.urgent eq 2 ? '紧急':'非常紧急'}</td>
								<td class="">
									<!-- 使用onclick 触发删除函数 -->
									<button onclick="deltask(this,${task.id})" class="btn btn-danger">删除</button> <!-- 使用超链接 点击 让其弹出一个模态窗口 -->
									<a onclick="updatetask(this)" class="btn btn-info" data-toggle="modal" href="#modal-form"
										data-id="${task.id}" data-title="${task.title}" data-creattime="${task.creattime}"
										data-fintime="${task.fintime}" data-person="${task.person}" data-content="${task.content}"
										data-urgent="${task.urgent}">修改</a>
								</td>
							</tr>
						</c:forEach>
					</tbody>

				</table>
				<div class="row">
					<div class="col-sm-6">
						<div class="dataTables_info">
							第${pageResult.currentPage} 页 共<span id="totalPage">${pageResult.totalPage}</span>页,总供 <span
								id="totalCount">${pageResult.totalCount}</span>条数据
						</div>
					</div>
					<div class="col-sm-6">
						<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
							<ul id="pagination"></ul>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>


	<!-- 模态对话框 -->
	<div tabindex="-1" class="modal inmodal" id="modal-form" role="dialog" aria-hidden="true"
		style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header"></div>
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12">
							<h3 class="m-t-none m-b">修改任务</h3>
							<form class="form-horizontal" action="" method="post" id="regForm">
								<!-- 隐藏域:带上用户的id -->
								<input type="hidden" name="id">
								<div class="form-group" id="unameForm">
									<label class="col-sm-3 control-label">标题：</label>
									<div class="col-sm-7">
										<input id="title" type="text" name="title" class="form-control" placeholder="请输入标题"
											required="required">
										<span class="help-block m-b-none" id="titleMsg"></span>
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label">创建时间： </label>
									<div class="col-sm-7">
										<input id="creattime" name="creattime" placeholder="请输入创建时间"
											class="form-control layer-date laydate-icon">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">截止时间：</label>
									<div class="col-sm-7">
										<input id="fintime" name="fintime" placeholder="请输入截止时间"
											class="form-control layer-date laydate-icon">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">执行人员：</label>
									<div class="col-sm-7">
										<select name="person" id="person" class="form-control m-b">
											<option value="-1">请选择执行人员</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">紧急程度：</label>
									<div class="col-sm-7">
										<input type="radio" name="urgent" value="1">
										普通
										<input type="radio" name="urgent" value="2">
										紧急
										<input type="radio" name="urgent" value="3">
										非常紧急
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">任务内容：</label>
									<div class="col-sm-7">
										<textarea rows="5" cols="30" id="content" name="content" class="form-control"
											placeholder="请输入任务内容"></textarea>

									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label">附件</label>
									<div class="col-sm-7">

										<div id="uploader" class="wu-example">
											<div id="thelist1" class="uploader-list"></div>
											<div class="btns" id="idcard_id1">
												<div id="picker1">选择附件</div>

												<button id="ctlBtn1" type="button" class="btn btn-default">开始上传</button>
											</div>
										</div>
										<input type="hidden" id=annex name="annex" />

									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-offset-3 col-sm-8">
										<button class="btn btn-sm btn-primary" id="update_btn" type="submit">修改任务</button>
										<button class="btn btn-white" type="button" data-dismiss="modal">关闭</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<small class="font-bold"> </small>
			</div>
			<small class="font-bold"> </small>
		</div>
	</div>



	<script type="text/javascript">
	
	//按事务方式批量删除
	function delpagetask(){
			var temp=[];
			$("#showtask :checked").each(function(){ 
				temp.push($(this).val());
			 });
			 var choice=temp.toString();
			 if(choice.length!=0){
			 console.log(choice);
			 	layer.confirm('亲,确定要删除这些任务?', {icon: 3, title:'温馨提示'}, function(index){
				 $.get("${ctx}/taskAdd.sxt?cmd=delpagetask",{id:choice},function(data){
				
				if(data.code == 1){//删除成功
						window.location.href="${ctx}/taskAdd.sxt?cmd=checkTask&currentPage=1&pageSize=${pageResult.pageSize}&keyword=${keyword}";
				}else{//删除失败
					layer.alert(data.msg, {
						  skin: 'layui-layer-molv' //样式类名
					});
				}
				 layer.close(index);//关闭当前窗口
			});
		});
		}
	}
	
	
/**
 *@param obj dom对象本身
 */
function updatetask(obj){
	//获取当前超链接上面的所有data-xx属性
	var id = $(obj).data("id");
	var title = $(obj).data("title");
	var creattime = $(obj).data("creattime");
	console.log(creattime);
	var fintime = $(obj).data("fintime");
	var person = $(obj).data("person");
	var content = $(obj).data("content");
	var urgent = $(obj).data("urgent");
	
	//获取form表单
	var regForm = $("#regForm")[0];
	
	//将获取的数组赋值给表单元素对应的value值
	
	regForm.id.value = id;
	regForm.title.value = title;
	regForm.fintime.value = fintime;
	regForm.creattime.value = creattime;
	regForm.person.value = person;
		
		var radios = $("input[type=radio][name='urgent']");
		     for (i=0; i<radios.length; i++){
		         if(radios[i].value==urgent){
		              radios[i].checked = true;
		          } 
		     }
		
	//$("input[type=radio][name='urgent'][value='"+urgent+"']").attr("checked",true);
	regForm.content.value = content;

	
}


	$(function(){
		//窗口加载时添加人员名单到模态窗口
		getPerson();
		
		//为全选绑定事件delallpagetask
		
		$("#delallpagetask").click(function(){
				if (this.checked){  
			        $(":checkbox").each(function(){ 
			              $(this).prop("checked", true);  
			        })
				} else {
					$(":checkbox").each(function(){ 
						
			              $(this).prop("checked", false);  
			        })
				}
		});
		
		
		//每页条数
		var pageSize = ${pageResult.pageSize};
		//关键字
		
		$("#pagination").bootstrapPaginator({
			currentPage : ${pageResult.currentPage},//当前页
			totalPages : ${pageResult.totalPage},//总页数
			size : "normal",
			bootstrapMajorVersion : 3,
			alignment : "right",
			numberOfPages : 7,
			itemTexts : function(type, page, current) {
				switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "尾页";
				case "page":
					return page;
				}
			},onPageClicked: function (event, originalEvent, type, page) {
				//TODO具体页面操作
				//跳转到后台用户列表,传递当前页以及每页条数的参数
				window.location.href="${ctx}/taskAdd.sxt?cmd=checkTask&currentPage="
						+page+"&pageSize=${pageResult.pageSize}&keyword=${keyword}";
			}
		});
		
		//为每页多少条的下拉框绑定一个change事件
		$("#pageSize").change(function(){
			window.location.href="${ctx}/taskAdd.sxt?cmd=checkTask&currentPage=1&pageSize="
					+this.value+"&keyword=${keyword}";
		});
		
		
		//监听搜搜框的键盘按下事件:如果用户按的是回车键,就触发向后台发送请求的操作
		$("#search").keyup(function(event){
			//event是js事件编程种的一个内置对象,可以获取当前用户按下键盘任意键的所有信息
			//键盘的每一个数字都是对应的ASCII码,13是Enter 键盘
			if(event.keyCode == 13){
				window.location.href="${ctx}/taskAdd.sxt?cmd=checkTask&keyword="+$(this).val();
			}
		});
		
		
		
			$.validator.addMethod("checkPerson", function(value, element, param) {
				var pattern = /^\+?[1-9][0-9]*$/;
				return pattern.test(value);
			});
	
	
			$("#regForm").validate({
				ignore : [], //检查所有表单
				errorPlacement : function(error, element) {
					if (element.is(":checkbox") || element.is(":radio")) {
						error.appendTo(element.parent());
					} else {
						error.insertAfter(element);
					}
				},
				
				rules : {
					title : "required",
					creattime : "required",
					fintime : "required",
					annex : "required",
					urgent : "required",
	
					person : {
						required : true,
						checkPerson : true
					}
				},
				messages : {
					title : "标题不能为空",
					person : {
						required : "负责人不能为空",
						checkPerson : "请选择执行人"
					}
				},
				
			/* 校验完毕触发的事件 */
			submitHandler : function() {
				//序列化表单
				var regFormData = $("#regForm").serialize();
				
				//发送ajax请求去后台修改数据
				$.post("${ctx}/taskAdd.sxt?cmd=updateTask",regFormData,function(data){
				
					if(data.code == 1){//修改成功
						var regForm = $("#regForm")[0];
						var tr = $("#tr_"+regForm.id.value);
						var tds = tr.children();
						
						var point = $("input[type=radio][name='urgent']:checked").val();
						var urgentvalue = "";
						if (point==1){
						urgentvalue="普通";
						}else if(point==2){
						urgentvalue="紧急";
						}else{urgentvalue="非常紧急";}
						var urgentstyle ="";
						if (point==1){
						urgentstyle="blue";
						}else if(point==2){
						urgentstyle="orange";
						}else{urgentstyle="red";}
						$(tds).eq(1).text(regForm.title.value);
						$(tds).eq(2).text(regForm.fintime.value);
						var index = regForm.person.selectedIndex;
						var name = regForm.person.options[index].text;
						$(tds).eq(3).text(name);
						$(tds).eq(5).text(urgentvalue);
						$(tds).eq(5).css("color", urgentstyle);
						//隐藏模态窗口
						$('#modal-form').modal('hide');
					}
					
				});
				
			}
			
		});
		
	});
	
	
	
	/**
	 *@param obj dom对象本身
	 *@param id 需要删除的用户id 
	 */
	function deltask(obj,id){
		layer.confirm('亲,确定要删除此任务?', {icon: 3, title:'温馨提示'}, function(index){
			
			//获取data-id自定义属性的值
			  
			//使用ajax向后台发送删除操作的请求,并带上 删除的id
			$.get("${ctx}/taskAdd.sxt?cmd=deltask",{id:id},function(data){
				
				if(data.code == 1){//删除成功
					
					//使用js删除当前行tr
					//思路:点击的是当前按钮,获取父元素 td,再获取td的父元素 tr,删除tr即可
					var tr =  $(obj).parent().parent();
					tr.remove();
					
					//获取总数 -1 
					var totalCount  = $("#totalCount").text();
					$("#totalCount").text(parseInt(totalCount)-1);
					//如果删除以后恰好总条数能够整除当前页面/总页数应该减1
					if(parseInt(totalCount) % ${pageResult.pageSize}){
						var totalPage = $("#totalPage").text();
						$("#totalPage").text(parseInt(totalPage)-1);
					}
					layer.alert(data.msg, {
						  skin: 'layui-layer-molv' //样式类名
					});
					//思考任务:考虑当前页数据删除完毕以后应该怎么处理
				}else{//删除失败
					layer.alert(data.msg, {
						  skin: 'layui-layer-molv' //样式类名
					});
				}
				 layer.close(index);//关闭当前窗口
			});
		});
	}
//日期约束
		var start = {
			elem : '#creattime',
			format : 'YYYY-MM-DD',
			min : '1970-01-01 23:59:59', //设定最小日期为当前日期
			max : '2099-01-01 23:59:59', //最大日期
			istime : true,
			istoday : false,
			choose : function(datas) {
				end.min = datas; //开始日选好后，重置结束日的最小日期
				end.start = datas //将结束日的初始值设定为开始日
			}
		};
		var end = {
			elem : '#fintime',
			format : 'YYYY-MM-DD ',
			min : laydate.now(),
			max : '2099-01-01 23:59:59',
			istime : true,
			istoday : false,
			choose : function(datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
			}
		};
		laydate(start);
		laydate(end);

//上传附件
jQuery(function() {
			var $ = jQuery,
				$list = $('#thelist1'), // thelist节点中添加文本  身份证正面  div添加  
				$btn = $('#ctlBtn1'), // 文件上传按钮   身份证正面 文件上传按钮
				state = 'pending',
				uploader;
	$("#modal-form").on("shown.bs.modal",function(){
			
			//初始化
			uploader = WebUploader.create({

				// 不压缩image
				resize : false,
	
				// 文件接收服务端。
				server : "${ctx}/fileUpload.gzsxt",
	
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				//开始上传 按钮的id 
				pick : '#picker1',
	
					// 只允许选择图片文件。
				accept : {
					title : 'Images',
					extensions : 'jpg,jpeg,bmp,png',
					mimeTypes : 'image/*'
				},
				
				//允许上传的文件个数
				fileNumLimit : 1,
				//单个文件最大的上传限制 1M
				fileSingleSizeLimit : 1024 * 1024 // 1M
			});
	
			// 当有文件添加进来的时候

			uploader.on('fileQueued', function(file) {
	
				uploader.makeThumb(file, function(error, ret) {
					if (error) {
	
						$list.append('<div id="' + file.id + '" class="item"><p class="state">预览错误</p></div>');
	
					} else {
						$list.append("<img  id='img" + file.id + "' src='" + ret + "' style='width: 100;height: 100' />");
					}
				}, 100, 100);
	
				$list.append("<button id='del" + file.id + "' type='button' class='btn btn-default'>取消此附件</button>");
	
				$("#del" + file.id).on('click', function() {
					uploader.removeFile(file, true);
					$("#img" + file.id).remove();
					$("#" + file.id).remove();
					$("#del" + file.id).remove();
				});
	
				$list.append('<div id="' + file.id + '" class="item">' +
					'<h4 class="info">' + file.name + '</h4>' +
					'<p class="state">等待上传...</p>' +
					'</div>');
			});
	
			// 文件上传过程中创建进度条实时显示。
			uploader.on('uploadProgress', function(file, percentage) {
				var $li = $('#' + file.id),
					$percent = $li.find('.progress .progress-bar');
	
				// 避免重复创建
				if (!$percent.length) {
					$percent = $('<div class="progress progress-striped active">' +
						'<div class="progress-bar" role="progressbar" style="width: 0%">' +
						'</div>' +
						'</div>').appendTo($li).find('.progress-bar');
				}
	
				$li.find('p.state').text('上传中');
	
				$percent.css('width', percentage * 100 + '%');
			});
	
			//文件上传成功后  触发的事件  触发一个回调函数
			uploader.on('uploadSuccess', function(file, response) {
	
				// 上传的图片保存的相对位置
				var idcard_url = response.msg;
	
				//将url 添加到  form表单的隐藏域中
				$("#annex").val(idcard_url);
	
				$('#' + file.id).find('p.state').text('已上传');

			});
	
			uploader.on('uploadError', function(file) {
				//TODO
				$('#' + file.id).find('p.state').text('上传出错');
				uploader.removeFile(uploader.getFile(file.id));
				uploader.reset();
			});
	
			uploader.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').fadeOut();
			});
	
			uploader.on('all', function(type) {
			console.log(type);
				if (type === 'startUpload') {
					state = 'uploading';
				} else if (type === 'stopUpload') {
					state = 'paused';
				} else if (type === 'uploadFinished') {
					state = 'done';
				}
	
				if (state === 'uploading') {
					$btn.text('开始上传');//不能连续使用页面上传,要关闭再打开的bug,暂时取消暂停功能
				} else {
					$btn.text('开始上传');
				}
			});
	
			//出错以后回调的函数
			uploader.on("error", function(type) {
				alert(type);
				if (type == "F_EXCEED_SIZE") {
					layer.alert('最大只能上传1M文件', {
						skin : 'layui-layer-molv' //样式类名
					});
				}
			});
	
			$btn.on('click', function() {
				if (state === 'uploading') {
					uploader.upload();//不能连续使用页面上传,要关闭再打开的bug,暂时取消暂停功能
				} else {
					uploader.upload();
				}
			});
		});
		
		$('#modal-form').on('hide.bs.modal', function () {
			    //$("#responeseText").text("");
			    $('#thelist1').empty();
			    uploader.destroy();
			});
		
		});
		
		
		
	//添加负责人到模态窗口
		function getPerson(){
			$.get("${ctx}/taskAdd.sxt",{cmd:"checkId_Name"},function(data){
				//拼接<option>标签
				var options = "<option value='-1'>请选择</option>";
				$.each(data,function(index,user){
					options +="<option value="+user.id+">"+user.uname+"</option>";
				});
				//将拼接的options数据设置到省的下拉框中
				$("#person").html(options);
			},"json");
		}

		function addtask(){
		   parent.layer.open({
		          type: 2,
		          title: '新增任务',
		          maxmin: true,
		          shadeClose: false, //点击遮罩关闭层
		          area : ['90%' , '85%'],
		          content: "${ctx}/taskadd/taskAddNewPage.jsp"
		        });
		}


</script>

</body>

</html>
